<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="../assets/css/layui.css">
    <link rel="stylesheet" href="../assets/css/view.css"/>
    <link rel="stylesheet" href="../assets/css/style.css"/>
    <link rel="stylesheet" href="/static/other/layui/css/layui.css" tppabs="https://www.layui.site/layui/dist/css/layui.css" media="all">
</head>
<body class="layui-tank">
<div class="layui-card">
    <form class="layui-form" action="" id="addUserForm">

        <div class="layui-form-item">
            <label class="layui-form-label">排序:</label>
            <div class="layui-input-block">
                <input type="text" name="idx"  id="idx" lay-verify="idx"
                       isckeckduplicate="true"min="1"  readonly="readonly" th:value="${sysRole.idx}" onkeyup="value=value.replace(/[^\d]/g,'')"  autocomplete="off" placeholder="请输入排序号" class="layui-input">
            </div>
            <input type="hidden" id="id" name="id" th:value="${sysRole.id}">
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">角色名称:</label>
            <div class="layui-input-block">
                <input type="text" name="roleName"  th:value="${sysRole.name}" id="roleName" lay-verify="roleName" autocomplete="off" placeholder="请输入角色名称" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-btn-container">
                <!--                <button type="button" class="layui-btn layui-btn-sm" lay-submit="getChecked">获取选中节点数据</button>-->
                <button type="button" class="layui-btn layui-btn-sm" lay-submit="setChecked">全选</button>
                <button type="button" class="layui-btn layui-btn-sm" lay-submit="reload">刷新树</button>
            </div>
            <label class="layui-form-label">菜单:</label>
            <div id="test7" style="display: inline-block"></div>
        </div>
    </form>
</div>
<div class=" tkbtnfxd">
    <button type="button" id="btn_confirm"  lay-filter="userForm"  lay-submit="getChecked" class="layui-btn  layui-btn-normal float-right">确定</button>
    <button type="button" id="btn_cancel" class="layui-btn layui-btn-primary float-right">取消</button>
</div>
<script src="../assets/jquery.min.js"></script>
<script src="../assets/layui.all.js"></script>
<script src="/static/other/layui/layui.js" charset="utf-8"></script>
<script>
    var element = layui.element;
    layui.use(['laypage', 'layer'], function(){
        var laypage = layui.laypage
            ,layer = layui.layer;
    });
    layui.use(['form'], function () {
        var form = layui.form;

        //监听提交
        /*     form.on('submit(userForm)',function (data) {
                     var temp=$('#addUserForm').serialize();
                     $.ajax({
                         url: '/addUser',
                         data: temp,
                         success: function (data) {
                             layer.msg("提交成功",{time:2000});
                             var index =parent.layer.getFrameIndex(window.name)
                             parent.layer.close(index)
                         }
                     });
             });*/
    });
    //取消
    $('#btn_cancel').on('click', function(){
        layui.use('layer', function(){
            var layer = layui.layer;
            var index =parent.layer.getFrameIndex(window.name)
            parent.layer.close(index)
        });
    })
</script >

<script>
    //调用示例
    layer.photos({
        photos: '.layer-photos-demo'
        ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
    });
</script>


<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
    layui.use(['tree','jquery', 'util'], function(){
        var tree = layui.tree
            ,layer = layui.layer
            ,util = layui.util
            , selectedIds =[[${selectedIds}]]
            //模拟数据
            ,data = [{
                title: '一级1'
                ,id: 1
                ,field: 'name1'
                ,checked: true
                ,spread: true
                ,children: [{
                    title: '二级1-1 可允许跳转'
                    ,id: 3
                    ,field: 'name11'
                    ,href: 'https://www.layui.com/'
                    ,children: [{
                        title: '三级1-1-3'
                        ,id: 23
                        ,field: ''
                        ,children: [{
                            title: '四级1-1-3-1'
                            ,id: 24
                            ,field: ''
                            ,children: [{
                                title: '五级1-1-3-1-1'
                                ,id: 30
                                ,field: ''
                            },{
                                title: '五级1-1-3-1-2'
                                ,id: 31
                                ,field: ''
                            }]
                        }]
                    },{
                        title: '三级1-1-1'
                        ,id: 7
                        ,field: ''
                        ,children: [{
                            title: '四级1-1-1-1 可允许跳转'
                            ,id: 15
                            ,field: ''
                            ,href: 'https://www.layui.com/doc/'
                        }]
                    },{
                        title: '三级1-1-2'
                        ,id: 8
                        ,field: ''
                        ,children: [{
                            title: '四级1-1-2-1'
                            ,id: 32
                            ,field: ''
                        }]
                    }]
                },{
                    title: '二级1-2'
                    ,id: 4
                    ,spread: true
                    ,children: [{
                        title: '三级1-2-1'
                        ,id: 9
                        ,field: ''
                        ,disabled: true
                    },{
                        title: '三级1-2-2'
                        ,id: 10
                        ,field: ''
                    }]
                },{
                    title: '二级1-3'
                    ,id: 20
                    ,field: ''
                    ,children: [{
                        title: '三级1-3-1'
                        ,id: 21
                        ,field: ''
                    },{
                        title: '三级1-3-2'
                        ,id: 22
                        ,field: ''
                    }]
                }]
            },{
                title: '一级2'
                ,id: 2
                ,field: ''
                ,spread: true
                ,children: [{
                    title: '二级2-1'
                    ,id: 5
                    ,field: ''
                    ,spread: true
                    ,children: [{
                        title: '三级2-1-1'
                        ,id: 11
                        ,field: ''
                    },{
                        title: '三级2-1-2'
                        ,id: 12
                        ,field: ''
                    }]
                },{
                    title: '二级2-2'
                    ,id: 6
                    ,field: ''
                    ,children: [{
                        title: '三级2-2-1'
                        ,id: 13
                        ,field: ''
                    },{
                        title: '三级2-2-2'
                        ,id: 14
                        ,field: ''
                        ,disabled: true
                    }]
                }]
            },{
                title: '一级3'
                ,id: 16
                ,field: ''
                ,children: [{
                    title: '二级3-1'
                    ,id: 17
                    ,field: ''
                    ,fixed: true
                    ,children: [{
                        title: '三级3-1-1'
                        ,id: 18
                        ,field: ''
                    },{
                        title: '三级3-1-2'
                        ,id: 19
                        ,field: ''
                    }]
                },{
                    title: '二级3-2'
                    ,id: 27
                    ,field: ''
                    ,children: [{
                        title: '三级3-2-1'
                        ,id: 28
                        ,field: ''
                    },{
                        title: '三级3-2-2'
                        ,id: 29
                        ,field: ''
                    }]
                }]
            }],
            data2 =[];
        allIds=[];
        $.ajax(
            {
                url: '/role/getTree',
                dataType:'json',
                type:'get',
                success:function (res){
                    tree.render({
                        elem: '#test7'
                        ,id: 'demoId2'
                        ,data: res.data.rootTrees
                        ,showCheckbox: true
                        ,click: function(obj){
                            var data = obj.data;  //获取当前点击的节点数据
                            layer.msg('状态：'+ obj.state + '<br>节点数据：' + JSON.stringify(data));
                        }
                    });
                    allIds= res.data.allIds;
                    //后端要先转json
                    tree.setChecked('demoId2',selectedIds)
                }
            }
        )
        //基本演示
        tree.render({
            elem: '#test12'
            ,data: data
            ,showCheckbox: true  //是否显示复选框
            ,id: 'demoId1'
            ,isJump: true //是否允许点击节点时弹出新窗口跳转
            ,click: function(obj){
                var data = obj.data;  //获取当前点击的节点数据
                layer.msg('状态：'+ obj.state + '<br>节点数据：' + JSON.stringify(data));
            }
        });
        //按钮事件
        util.event('lay-submit', {
            getChecked: function(othis){
                var checkedData = tree.getChecked('demoId2'); //获取选中节点的数据
                /* layer.alert(JSON.stringify(checkedData), {shade:0});
                 console.log(checkedData);*/
            }
            ,setChecked: function(){
                tree.setChecked('demoId2', allIds); //勾选指定节点
            }
            ,reload: function(){
                //重载实例
                tree.reload('demoId2', {

                });

            }
        });


        $('#btn_confirm').on('click', function(){
            var selectDatas = tree.getChecked('demoId2');
            var roleName= $('#roleName').val();
            var idx= $('#idx').val();
            var id= $('#id').val();
            $.ajax({
                url:"/role/editRole",
                method:"POST",
                dataType:'JSON',
                contentType:'application/json',
                data:JSON.stringify({'idx':idx,'id':id,'roleName':roleName,'selectDatas':selectDatas}),
                success:function (data){

                },

            });
            var index =parent.layer.getFrameIndex(window.name)
            parent.layer.close(index)
        })


    });
</script>
</body>
</html>
